<!doctype html>
<html>
    <head>
        <!-- meta -->
        <!-- meta -->
        <title>Basic usage</title>
        <!-- css -->
        <link href="../styles/examples.css" rel="stylesheet"/>
        <link href="../../source/styles/nova.common.css" rel="stylesheet"/>
        <link href="../../source/styles/nova.css" rel="stylesheet"/>
        <!-- css -->
        <!-- script -->
        <script src="../js/jquery.js"></script>
        <script src="../../source/js/nova.core.js"></script>
        <script src="../../source/js/nova.data.js"></script>
        <!-- script -->
    </head>
    <body>
        <!-- nav -->
        <!-- nav -->
        <!-- description -->
        <div class="description">Basic usage</div>
        <!-- description -->
        <div id="example" class="n-content">
            <table id="movies">
                <thead>
                    <tr>
                        <th>Rank</th>
                        <th>Rating</th>
                        <th>Title</th>
                        <th>Year</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td colspan="4"></td>
                    </tr>
                </tbody>
            </table>

            <script id="template" type="text/x-nova-template">
                <tr>
                    <td>#= rank #</td>
                    <td>#= rating #</td>
                    <td>#= title #</td>
                    <td>#= year #</td>
                </tr>
            </script>

            <script>
                $(document).ready(function() {
                    // create a template using the above definition
                    var template = nova.template($("#template").html());

                    var movies = [
                        { "rank": 1,  "rating": 9.2, "year": 1994, "title": "The Shawshank Redemption" },
                        { "rank": 2,  "rating": 9.2, "year": 1972, "title": "The Godfather" },
                        { "rank": 3,  "rating": 9,   "year": 1974, "title": "The Godfather: Part II" },
                        { "rank": 4,  "rating": 8.9, "year": 1966, "title": "Il buono, il brutto, il cattivo." },
                        { "rank": 5,  "rating": 8.9, "year": 1994, "title": "Pulp Fiction" },
                        { "rank": 6,  "rating": 8.9, "year": 1957, "title": "12 Angry Men" },
                        { "rank": 7,  "rating": 8.9, "year": 1993, "title": "Schindler's List" },
                        { "rank": 8,  "rating": 8.8, "year": 1975, "title": "One Flew Over the Cuckoo's Nest" },
                        { "rank": 9,  "rating": 8.8, "year": 2010, "title": "Inception" },
                        { "rank": 10, "rating": 8.8, "year": 2008, "title": "The Dark Knight" }
                    ];

                    var dataSource = new nova.data.DataSource({
                        data: movies,
                        change: function() { // subscribe to the CHANGE event of the data source
                            $("#movies tbody").html(nova.render(template, this.view())); // populate the table
                        }
                    });

                    // read data from the "movies" array
                    dataSource.read();
                });
            </script>

            <style scoped>
                #movies {
                    border-collapse: separate;
                    border-spacing: 0;
                }

                #movies th {
                    background-color: #ef652a;
                    padding: 9px 6px;
                    color: #fff;
                    text-align: left;
                    line-height: 14px;
                    border-width: 1px;
                    border-style: solid;
                    border-color: #d75b26 #d75b26 #d75b26 #f28455;
                }

                #movies td {
                    line-height: 23px;
                    padding: 0 6px;
                    background: #eaeaea;
                    color: #3d3d3d;
                    border-width: 1px;
                    border-style: solid;
                    border-color: #f4f4f4 #d6d6d6 #d6d6d6 #f4f4f4;
                }
            </style>
        </div>
        <!-- tools -->
        <!-- tools -->
    </body>
</html>


